<template>
    <el-breadcrumb class="app-breadcrumb" separator="/">
        <transition-group v-if="false" name="breadcrumb"/>
        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
            <span
                v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
                class="no-redirect"
            >{{ t(item.meta.title) }}</span
            >
            <template v-else>

                <el-dropdown class="bread-el-dropdown" @command="handleLink">
                    <div class="title-box">
                        {{ t(item.meta.title) }}
                        <el-icon class="icon">
                            <arrow-down />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu >
                            <el-dropdown-item :command="val2" v-for="(val2,index2) in item.children" :key="index2">{{ t(val2.meta.title) }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>


            </template>
            <!-- <a v-else @click.prevent="handleLink(item)">{{ t(item.meta.title) }}</a> -->
        </el-breadcrumb-item>

    </el-breadcrumb>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import router from '@/router'
import store from '@/store'
import * as pathToRegexp from 'path-to-regexp'
import { getAllParentPath,filter } from '@/utils/tools'
import { useI18n } from '@/hooks/usel18n';
import {ArrowDown} from '@element-plus/icons-vue';
defineOptions({
  name: 'BreadCrumb',
})
const { t } = useI18n();
const levelList = ref([])

const permission_routes = computed(() => store.state.permission.frontMenuList)

watch(
  () => router.currentRoute.value,
  (route) => {
    if (route.path.startsWith('/redirect')) {
      return
    }
    getBreadcrumb()
  }
)

const currentRoute = router.currentRoute.value;

if(!currentRoute.path.startsWith('/redirect')) {
  getBreadcrumb()
}


function getMatched(menus, parent) {
  const metched = []
  menus.forEach((item) => {
    if (parent.includes(item.path)) {
      metched.push({
        ...item,
        name: item.meta?.title || item.name,
      })
    }
    if (item.children?.length) {
      metched.push(...getMatched(item.children, parent))
    }
  })
  return metched
}

function filterItem(list) {
  return filter(list, (item) => {
    const { meta, name } = item
    if (!meta) {
      return !!name
    }
    const { title, hideBreadcrumb, hideMenu } = meta
    if (!title || hideBreadcrumb || hideMenu) {
      return false
    }
    return true
  }).filter((item) => !item.meta?.hideBreadcrumb)
}

function getBreadcrumb() {
  const menus = permission_routes.value
  const currentRoute = router.currentRoute

  const routeMatched = currentRoute.value.matched
  const cur = routeMatched?.[routeMatched.length - 1]
  let path = currentRoute.value.path

  if (cur && cur?.meta?.currentActiveMenu) {
    path = cur.meta.currentActiveMenu
  }

  const parent = getAllParentPath(menus, path)
  const filterMenus = menus.filter((item) => item.path === parent[0])
  const matched = getMatched(filterMenus, parent)

  if (!matched || matched.length === 0) {
    return
  }

  const breadcrumbList = filterItem(matched)

  if (currentRoute.value.meta?.currentActiveMenu) {
    breadcrumbList.push({
      ...currentRoute.value,
      name: currentRoute.value.meta?.title || currentRoute.value.name,
    })
  }
  levelList.value = breadcrumbList
}

function handleLink(item) {
  const { redirect, path } = item
  if (redirect) {
    router.push(redirect)
    return
  }
  router.push(item.path)
  //router.push(pathCompile(path));
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  margin-left: 8px;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
.bread-el-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-box {
    display: flex;
    align-items: center;

    >.icon {
      margin-left: 2px;
     // margin-top: -4px;
    }
    &:hover {
      color: var(--el-color-primary);
      //color: red;
    }
  }
}
</style>
